<template>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="homeTop">主页</van-tabbar-item>
      <van-tabbar-item icon="cart-o" :badge="goodsNum" to="shopCart">购物车</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="loginOut">退出</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, getCurrentInstance, ref } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "HomeBottom",
  setup() {
    const store = useStore();
    const active = ref(0);
    const { proxy }: any = getCurrentInstance();
    const goodsNum = ref(
      computed(() => {
        return store.getters.getGoodsNum;
      })
    );

    function loginOut() {
      proxy.$router.push("/login");
      window.sessionStorage.removeItem("token");
    }
    return {
      active,
      goodsNum,
      loginOut,
    };
  },
});
</script>
<style scoped>
</style>